<template>
	<view class="page">
		<u-navbar  back-icon-color="#fff" :back-text-style="{color:'#fff'}"  :border-bottom="false" :is-back="true" back-text="室内地图" :background="{ background:'#357BED'}"></u-navbar>
		
		<view class="list">
			<view v-for="(item,index) in list" class="item" :key="index">
				<view class="body u-flex u-row-between u-border-bottom" @click="goDetails(item)">
					<view class="img">
						<image :src="item.PicUrl" mode="aspectFill"></image>
					</view>
					<view class="href u-flex u-flex-1 u-row-between">
						<view class="href-left">
							<text class="title">
								{{item.RegionTitle}}
							</text>
							<view class="infor u-flex u-flex-1 u-row-between u-row-center">
								<text class="">设备量：{{item.TotalNum}}</text>
								<text class="infor-2">责任人：{{item.UserName}}</text>
							</view>
						</view>
						<view class="href-right">
							<u-icon name="arrow-right" color="#999999" size="28"></u-icon>
						</view>
					</view>
				</view>
				<view class="footer u-flex u-row-center u-row-between">
					<view class="footer-view u-flex u-row-center"><image style="width: 29rpx; height: 27rpx;margin-right: 15rpx;" src="../../static/img/idoor-map-icon1.png"></image><text>故障量：{{item.GzNum}}</text></view>
					<view class="footer-view u-flex u-row-center"><image style="width: 29rpx; height: 27rpx;margin-right: 15rpx;" src="../../static/img/idoor-map-icon2.png"></image><text>报警量：{{item.YjNum}}</text></view>
				</view>
			</view>
			<u-loadmore v-show="list.length>1" :status="status" icon-type="flower" bg-color="transperant"   margin-top="30" margin-bottom="30"/>
		</view>
		<u-empty margin-top="160" :show="total == 0" text="暂无数据" mode="list"></u-empty>
	</view>
	
</template>

<script>
export default {
	data() {
		return {
			list: [],
			userInfo: {},
			pageIndex: 1,
			pageSize: 5,
			status: 'loadmore',
			tableIndex: 'ld',
			total: -1,
			baseUrl:''
		}
	},
	methods: {
		async getList() {
			this.status = "loading";
			delete this.userInfo.passWord;
			this.$axios.post('Device/XSnQuery',{...this.userInfo,pageSize: this.pageSize,pageIndex: this.pageIndex}, p => {
				this.total = p.count				
				this.list = this.list.concat(p.data);
				 if (this.list.length >= p.count) {
					this.status = "nomore"
				 } else {
					this.pageIndex += 1;
					this.status = "loadmore"
				 }
				 uni.stopPullDownRefresh();
			})
		},
		goDetails(item){
			uni.navigateTo({
				url:'./mapDeails?RegionTitle='+item.RegionTitle
			})
		}
	},
	onLoad() {
		this.userInfo=this.$util.getUserInfo()
		this.getList();
		this.baseUrl=this.$axios.baseUrl
		
	},
	onPullDownRefresh() {
		this.pageIndex = 1;
		this.list = [];
		this.getList()
	},
	onReachBottom() {
		if (this.status == 'loading' || this.status == 'nomore') {
			return;
		}
		this.getList()
	}
};
</script>

<style scoped lang="scss">
	.page {
		background: rgb(244,244,244);
		min-height: 100vh;
	}
	.list {
		padding: 12rpx 0;
	}
	
	.item {
		background-color: #fff;
		font-size: 32rpx;
		color: #3e3e3e;
		padding: 30rpx 30rpx 20rpx;
		padding-bottom: 0;
		margin-bottom: 12rpx;
		.body {
			
			padding-bottom: 30rpx;
		}
		.img {
			flex: 0 0 160rpx;
			height: 140rpx;
			border: 1rpx solid #ebebeb;
			margin-right: 20rpx;
			border-radius: 8rpx;
			overflow: hidden;
			image {
				width: 100%;
				height: 100%;
			}
		}
		.href {
				.title {
					font-weight: bold;
					font-size: 29rpx;
				}
				.infor {
					flex: 1;
					margin-top: 30rpx;
					font-size: 26rpx;
					color: #acacac;
					.infor-2 {
						margin-left: 20rpx;
					}
				}
				
		}
		.footer {
			font-size: 28rpx;
			
			.footer-view {
				height: 40rpx;
				flex: 1;
				text-align: center;
				margin: 20rpx 0;
				color: #060606;
			}
			.footer-view:nth-of-type(1) {
				border-right: 1rpx solid #ebebeb;
			}
		}
		
	}
		
	
</style>